<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加图书</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.1.0/fetch.min.js"></script>
    <script src="/js/jquery-3.6.4.js"></script>
    <style>
        body {
            font-family: '微软雅黑', Arial, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 700px;
            margin: 50px auto;
        }
        h1 {
            text-align: center;
        }
        form {
            margin-top: 20px;
        }
        label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="number"],
        textarea {
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ddd;
        }
        textarea {
            resize: vertical;
        }
        button[type="submit"] {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<h1>添加图书</h1>
<div class="container">
    <form id="bookForm">
        <label for="bookName">书名:</label>
        <input type="text" id="bookName" name="bookName" required>

        <label for="bookPhoto">封面图片URL:</label>
        <input type="text" id="bookPhoto" name="bookPhoto" required>

        <label for="category">分类:</label>
        <input type="text" id="category" name="category" required>

        <label for="author">作者:</label>
        <input type="text" id="author" name="author" required>

        <label for="totalStock">库存数量:</label>
        <input type="number" id="totalStock" name="totalStock" required>

        <label for="description">描述:</label>
        <textarea id="description" name="description" rows="4"></textarea>

        <button type="submit">提交</button>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('bookForm');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            var formData = {
                bookName: form.bookName.value,
                bookPhoto: form.bookPhoto.value,
                category: form.category.value,
                author: form.author.value,
                totalStock: form.totalStock.value,
                description: form.description.value
            };

            fetch('/api/v1/books', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData),
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Success:', data);
                    // 表单提交成功后，重定向到 "/bookslist" 页面
                    window.location = '/bookslist';
                })
                .catch((error) => {
                    console.error('Error:', error);
                    // 错误处理逻辑，例如显示一个错误消息
                    alert('添加图书时发生错误，请稍后重试');
                });
        });
    });
</script>
</body>
</html>